<script setup>
import { inject } from 'vue';

//穿透获取祖先组件的方法
const { toggleTodo, removeTodo } = inject('todoHandlers');

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});
</script>

<template>
  <li>
    <input
      type="checkbox"
      :checked="data.complete"
      @change="toggleTodo(data.id)"
    />
    <span
      :style="{
        textDecoration: data.completed ? 'line-through' : ''
      }"
      >{{ data.content }}</span
    >
    <button @click="removeTodo(data.id)">REMOVE</button>
  </li>
</template>
